<template>
  <div class="user-wrapper">

    <user-portal-designe @reloadPortlet="$emit('reloadPortlet')"/>

    <user-message @toMyAnnouncement="toMyAnnouncement"/>

    <a-tooltip style="cursor:pointer">
      <template slot="title">
        {{$t('m.system.portal.entity.theme')}}
      </template>
      <a-icon type="skin" @click="systemSetting" :style="{ fontSize: '18px', padding: '0 10px'}"/>
    </a-tooltip>

    <a-tooltip v-if="back" style="cursor:pointer">
      <template slot="title">
        {{$t('m.system.portal.entity.console')}}
      </template>
      <a-icon type="desktop" @click="toConsole" :style="{ fontSize: '18px', padding: '0 10px'}"/>
    </a-tooltip>

    <a-tooltip style="cursor:pointer">
      <template slot="title">
        {{ fullScreen ? $t('m.system.portal.entity.nuFullScreen') : $t('m.system.portal.entity.fullScreen') }}
      </template>
      <a-icon
        :type="fullScreen ? 'fullscreen-exit' : 'fullscreen'"
        @click="toggleFullScreen"
        :style="{ fontSize: '18px', padding: '0 10px'}"/>
    </a-tooltip>

    <a-dropdown>
      <span class="action ant-dropdown-link user-dropdown-menu">
        <a-avatar class="avatar" :src="getAvatar()"/>
        <span>{{ nickname() }}</span>
        <a-icon type="caret-down" />
      </span>
      <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
        <a-menu-item key="0" style="cursor:default; background: none;">
          <span style="padding: 24px 10px 24px 10px">
            {{$t('m.system.portal.entity.department')}}：{{ orgname() || $t('m.system.portal.entity.notDepartment') }}
          </span>
          <a-divider style="margin: 10px"/>
        </a-menu-item>
        <a-menu-item key="4" @click="updatePassword">
          <ych-icon type="lock"/>
          <span> {{$t('m.system.portal.entity.changePassword')}}</span>
        </a-menu-item>
        <a-menu-item key="5" @click="updateCurrentDepart">
          <ych-icon type="cluster"/>
          <span> {{$t('m.system.portal.entity.changeDepartment')}}</span>
        </a-menu-item>
<!--        <a-menu-item key="6" @click="updateCurrentLanguage">
          <ych-icon type="folder"/>
          <span>切换语言</span>
        </a-menu-item>-->
        <a-menu-item key="7" @click="handleLogout">
          <ych-icon type="logout"/>
          <span> {{$t('m.system.portal.entity.logout')}}</span>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
    <user-password ref="userPassword"></user-password>
    <depart-select ref="departSelect" :closable="true" :title="$t('m.system.portal.entity.changeDepartment')"></depart-select>
    <setting-drawer ref="settingDrawer" :hideLayout="true"></setting-drawer>
    <language-select ref="languageSelect"></language-select>
  </div>
</template>

<script>

import UserMessage from '../tools/UserMessage'
import UserPassword from '../tools/UserPassword'
import DepartSelect from '../tools/DepartSelect'
import LanguageSelect from '../tools/LanguageSelect'
import {mapActions, mapGetters} from 'vuex'
import {getFileAccessHttpUrl} from '@/api/manage'
import store from '../../store'
import UserPortalDesigne from "../tools/UserPortalDesigne";
import SettingDrawer from "../setting/SettingDrawer";

export default {
  name: 'AppPortalUserMenu',
  data() {
    return {
      fullScreen: document.fullscreenElement,
      back: store.getters.back,
    }
  },
  components: {
    UserMessage,
    UserPassword,
    DepartSelect,
    LanguageSelect,
    UserPortalDesigne,
    SettingDrawer
  },
  methods: {
    // 全屏切换
    toggleFullScreen() {
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen()
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        }
      }
      this.fullScreen = !this.fullScreen
    },
    ...mapActions(['Logout']),
    ...mapGetters(['nickname', 'orgname', 'avatar', 'userInfo']),
    getAvatar() {
      const avatar = getFileAccessHttpUrl(this.avatar())
      if (avatar) {
        return avatar
      } else {
        return process.env.BASE_URL + 'avatar.jpg'
      }
    },
    handleLogout() {
      const that = this
      this.$confirm({
        title: this.$t('m.common.label.prompt'),
        content: this.$t('m.system.portal.verify.logout'),
        onOk() {
          return that.Logout({oss: true}).then(() => {
            window.location.href = process.env.BASE_URL || '/'
          }).catch(err => {
            that.messageUtil.error(err.message)
          })
        },
        onCancel() {
        },
      })
    },
    toConsole() {
      this.$router.push(store.getters.CONSOLE_INDEX_MAIN_PAGE_PATH).catch(err => {})
    },
    updatePassword() {
      let username = this.userInfo().username
      this.$refs.userPassword.show(username)
    },
    updateCurrentDepart() {
      this.$refs.departSelect.show()
    },
    updateCurrentLanguage() {
      this.$refs.languageSelect.show()
    },
    toMyAnnouncement() {
      this.$router.push({
        path: '/account/userannouncement',
        name: 'account-userannouncement'
      }).catch(err => {});
    },
    systemSetting() {
      this.$refs.settingDrawer.visible = true
    },
  }
}
</script>

<style lang="less" scoped>

.user-wrapper {
  float: right;

  .action {
    cursor: pointer;
    padding: 0 14px;
    display: inline-block;
    transition: all .3s;

    .avatar {
      margin-right: 10px;
      vertical-align: middle;
    }

    .icon {
      font-size: 16px;
      padding: 4px;
    }
  }

  .portalDesigne{
    color: rgba(0, 0, 0, 0.65);
  }
}

.user-dropdown-menu-wrapper.ant-dropdown-menu {
  padding: 4px 0;

  .ant-dropdown-menu-item {
    width: 160px;
  }

  .ant-dropdown-menu-item > .anticon:first-child,
  .ant-dropdown-menu-item > a > .anticon:first-child,
  .ant-dropdown-menu-submenu-title > .anticon:first-child
  .ant-dropdown-menu-submenu-title > a > .anticon:first-child {
    min-width: 12px;
    margin-right: 8px;
  }

}
</style>
